<template>
  <Descriptions :column="2" bordered class="dashed">
    <DescriptionsItem label="限制主体">{{ detail?.punishTargetName }}</DescriptionsItem>
    <DescriptionsItem label="身份证号">{{ maskCode(detail?.punishTargetCode) }}</DescriptionsItem>
    <DescriptionsItem label="限制内容">{{ detail?.limitAptName }}</DescriptionsItem>
    <DescriptionsItem label="限制期限">{{ parseTime(detail.punishStartDate )  }} ~ {{ parseTime(detail.punishEndDate )  }}</DescriptionsItem>
    <DescriptionsItem label="限制说明" :span="2">{{ detail?.procExplain }}</DescriptionsItem>
    <DescriptionsItem label="限制原因" :span="2">{{ detail?.punishReason }}</DescriptionsItem>
    <DescriptionsItem label="处罚机关">{{ detail?.punishOrgan }}</DescriptionsItem>
    <DescriptionsItem label="决定日期">{{ parseTime(detail.punishDate )  }}</DescriptionsItem>
    <DescriptionsItem label="公文名称">{{ detail?.punishName }}</DescriptionsItem>
    <DescriptionsItem label="公文编号">{{ detail?.punishDocNo }}</DescriptionsItem>
  </Descriptions>

</template>
<script lang="ts" >
import {defineComponent, PropType, toRefs} from "vue";
import { parseTime, maskCode  } from '/@/utils';
import { Descriptions } from "ant-design-vue";

interface BaseModel {
  limitAptName?:string;
  limitType?:string;
  procExplain?:string;
  punishActionId?:string;
  punishDate?:number;
  punishDocNo?:string;
  punishEndDate?:number;
  punishName?:string;
  punishOrgan?:string;
  punishReason?:string;
  punishStartDate?:number;
  punishTargetCode?:string;
  punishTargetId?:string;
  punishTargetName?:string;
}

export default defineComponent({
  props: {
    detail:{
      type: Object as PropType<BaseModel>,
      default: {}
    }
  },
  components:{
    Descriptions,DescriptionsItem:Descriptions.Item,
  },
  setup(props) {
    const { detail } = toRefs(props);
    return {
      detail , parseTime, maskCode
    }
  }
})
</script>

<style lang="less">
.dashed{
  .ant-descriptions-item-content {
    width: 290px !important;
  }
}

</style>

